<template>
  <Card 
    :hover="true"
    class="cursor-pointer"
    @click="handleClick"
  >
    <div class="flex items-start justify-between">
      <div class="flex-1">
        <div class="flex items-center space-x-2 mb-2">
          <h3 class="font-semibold text-gray-900">{{ announcement.title }}</h3>
          <Badge 
            :variant="getTypeVariant(announcement.type)"
            size="sm"
          >
            {{ getTypeText(announcement.type) }}
          </Badge>
          <Badge 
            v-if="announcement.priority > 0" 
            variant="danger"
            size="sm"
          >
            重要
          </Badge>
        </div>
        <p class="text-gray-600 text-sm line-clamp-2">{{ announcement.content }}</p>
        <div class="flex items-center justify-between mt-3">
          <div class="flex items-center space-x-4 text-xs text-gray-500">
            <span>{{ formatTime(announcement.created_at) }}</span>
            <span>{{ announcement.author.username }}</span>
          </div>
          <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </div>
      </div>
    </div>
  </Card>
</template>

<script setup lang="ts">
import Card from '@/components/ui/Card.vue'
import Badge from '@/components/ui/Badge.vue'

interface Props {
  announcement: {
    id: number
    title: string
    content: string
    type: string
    priority: number
    created_at: string
    author: {
      username: string
    }
  }
}

const props = defineProps<Props>()

const emit = defineEmits<{
  click: [announcement: typeof props.announcement]
}>()

const getTypeVariant = (type: string) => {
  const variants: Record<string, 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'> = {
    general: 'default',
    important: 'danger',
    maintenance: 'warning'
  }
  return variants[type] || 'default'
}

const getTypeText = (type: string) => {
  const texts: Record<string, string> = {
    general: '普通',
    important: '重要',
    maintenance: '维护'
  }
  return texts[type] || '普通'
}

const formatTime = (timeStr: string) => {
  const date = new Date(timeStr)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  
  if (diff < 60000) { // 1分钟内
    return '刚刚'
  } else if (diff < 3600000) { // 1小时内
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (diff < 86400000) { // 1天内
    return `${Math.floor(diff / 3600000)}小时前`
  } else if (diff < 604800000) { // 1周内
    return `${Math.floor(diff / 86400000)}天前`
  } else {
    return date.toLocaleDateString()
  }
}

const handleClick = () => {
  emit('click', props.announcement)
}
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
